<template>
    <div style="padding: 10px" class="order-query">
        <!-- tab页-->
        <div class="nav-tab">
            <template v-if="searchType === 'container' || searchType === 'mat'">
                <Menu ref="wareMenu" mode="horizontal" style="font-weight: 700;color:#000;padding: 0 30px; height: 70px" :active-name="menuActiveName" @on-select="menuSelect">
                    <MenuItem v-for="item in companySelected" :key="item.companyId" :name="item.companyId">
                        <p style="height: 20px">{{ $utils.handleDictData(item.companyId, dictInfo.companyId) }}</p>
<!--                        <p style="height: 20px">({{ (item.weight / 1000).toFixed(2) }}吨)</p>-->
                    </MenuItem>
                </Menu>
                <div style="padding-right: 30px">
                    <Input v-model="tableData.searchKey" placeholder="请输入关键字查询" style="width: 200px;" clearable @on-search="initData" search></Input>
                    <Button style="width: 100px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" @click="advancedQuery">高级查询</Button>
                </div>
            </template>

            <div v-if="searchType === 'order'" class="search-area">
                <Row :gutter="20">
                    <i-col span="5">
                        <Input placeholder="请输入采购合同号" size="large" v-model="searchForm.purchasingAgreementCode" @on-enter="search">
                            <Icon slot="prefix" type="ios-cart-outline" />
                        </Input>
                    </i-col>
                    <i-col span="5">
                        <Input   size="large" placeholder="请选择货源方" clearable filterable v-model="searchForm.entrustedEnterprise">
                            <Icon slot="prefix" type="ios-cart-outline" color="#f68f42" style="font-weight: 700;" size="20" />
                            <!-- <i-option v-for="(item, index) in dictInfo.customerId" :key="index" :value="item.dictValue">{{ item.dictName }}</i-option> -->
                        </Input>
                    </i-col>
                    <i-col span="5">
                        <DatePicker v-model="searchForm.contractValidityPeriod" size="large" type="daterange" placeholder="请选择合同期限" split-panels style="width: 100%;"></DatePicker>
                    </i-col>
                    <i-col span="4">
                        <Select size="large" placeholder="请选择订单状态" clearable filterable multiple v-model="searchForm.orderStatus">
                            <i-option v-for="(item, index) in statusList" :key="index" :value="item.value">{{ item.text }}</i-option>
                        </Select>
                    </i-col>
                    <i-col span="5">
                        <Button class="search-btn" @click="search">查询</Button>
                        <Button class="search-btn" @click="orderSearchReset">重置</Button>
                        <Button class="search-btn" @click="add">新增</Button>
                    </i-col>
                </Row>
            </div>
        </div>

        <div class="operation">
            <Row>
                <i-col :span="24">
                    <Card style="height: 60px; margin-top: 10px; width: 100%">
                        <RadioGroup v-model="sortField" size="large" style="margin-left: 10px" @on-change="searchSortChange">
                            <Radio v-if="searchType === 'order'" label="orderCreatedDate">
                                <span>按订单创建日</span>
                            </Radio>
                            <Radio v-else label="contractValidityPeriodStart">
                                <span>按合同开始日</span>
                            </Radio>
                            <Radio label="contractExpirationDate">
                                <span>按合同截止日</span>
                            </Radio>
                            <Divider type="vertical" />
                            <a class="flex-class" @click="switchSort('up')" v-show="switchSortPng === 'up'" style="float: right; margin-top: 2px"><img src="../../assets/images/sort_up.png" width="16"></a>
                            <a class="flex-class" @click="switchSort('down')" v-show="switchSortPng === 'down'" style="float: right; margin-top: 2px"><img src="../../assets/images/sort_down.png" width="16"></a>
                        </RadioGroup>
                    </Card>
                </i-col>
            </Row>
        </div>

        <div class="content" v-loading="loading">
            <Scroll :on-reach-bottom="handleReachBottom" :height="s_height">
                <template v-if="tableData.list && tableData.list.length > 0 && searchType === 'order'">
                    <data-card v-for="item in tableData.list" :key="item.id" :data="item" :dictInfo="dictInfo"></data-card>
                </template>
                <el-empty v-if="tableData.list.length === 0" description="数据为空"></el-empty>
            </Scroll>
        </div>
        <div>
            <el-dialog
                top="5vh"
                width="90vw"
                :visible.sync="businessTypeModalShow"
                title="新增商贸订单"
                z-index="1000"
                :destroy-on-close="true"
                :close-on-click-modal="false"
                @close="businessTypeModalShow = false">
                <div>
                    <el-steps :active="1" :align-center="true">
                        <el-step title="选择业务类型"></el-step>
                        <el-step title="填写主要信息"></el-step>
                        <el-step title="审核订单信息"></el-step>
                        <el-step title="融资放款"></el-step>
                        <el-step title="质押在库"></el-step>
                        <el-step title="填写解押信息"></el-step>
                        <el-step title="审核解押信息"></el-step>
                        <el-step title="支付解押款"></el-step>
                        <el-step title="订单完结"></el-step>
                    </el-steps>
                </div>
                <span style="width:50%;display:inline-block;margin-top: 15px;">
                    <el-row style="height: 40px;line-height: 40px;">
                        <el-col :span="20" class="checkbox-label">业务类型</el-col>
                    </el-row>
                    <el-row style="height: 40px;line-height: 40px;">
                        <el-col :span="20" class="checkbox-label">
                            <el-select
                                v-model="SelectBusinessType"
                                placeholder="请选择"
                                style="width: 100%"
                                filterable>
                                <el-option v-for="i in businessTypeList" :key="i.dictValue" :label="i.dictName" :value="i.dictValue" />
                            </el-select>
                        </el-col>
                    </el-row>
                </span>
                <span style="width:50%;display:inline-block;margin-top: 15px;">
                    <el-row style="height: 40px;line-height: 40px;">
                        <el-col :span="20" class="checkbox-label">运营企业</el-col>
                    </el-row>
                    <el-row style="height: 40px;line-height: 40px;">
                        <el-col :span="20" class="checkbox-label">
                            <el-select
                                v-model="selectCompanyId"
                                placeholder="请选择"
                                style="width: 100%"
                                filterable>
                                <el-option v-for="i in customerCompanyList" :key="i.dictValue" :label="i.dictName" :value="i.dictValue" />
                            </el-select>
                        </el-col>
                    </el-row>
                </span>

                <template #footer>
                    <el-button size="mini" type="warning" @click="businessTypeModalShow = false">取消</el-button>
                    <el-button :loading="confirmLoading" size="mini" type="primary" @click="confirmSelectBusinessType">确认</el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import DataCard from './dataCard';
import $ from 'jquery';
import api from '@/api/order';
import baseCodeApi from '@/api/baseCode';
import axios from 'axios';
export default {
    name: 'orderQuery',
    components: {
        DataCard
    },
    data() {
        return {
            menuActiveName: '',
            cancel: null,
            seniorSearchForm: {
                matType: null,
                validatePeriod: null,
                warehouse: null,
                goodsBondedProperty: null,
                dateGenSt: null,
                dataGenEd: null,
                expireDateSt: null,
                expireDateEd: null,
                inPlanTimeSt: null,
                inPlanTimeEd: null,
                contractValidityPeriodStartSt: null,
                contractValidityPeriodStartEd: null,
                contractValidityPeriodEndSt: null,
                contractValidityPeriodEndEd: null
            },
            searchMenu: false,
            allCheck: false,
            searchType: 'order',
            sortField: 'orderCreatedDate',
            switchSortPng: 'up',
            matSelected: [],
            companySelected: [],
            dataSelected: [],
            containerDataSelected: [],
            companyList: [],
            matList: [],
            searchShow: true,
            companyAllChecked: true,
            confirmLoading: false,
            SelectBusinessType: 'internalAgentPurchase',
            selectCompanyId: '',
            businessTypeList: [
                {
                    dictName: '现货质押',
                    dictType: 'ORDER_BUSINESS_TYPE',
                    dictTypeName: null,
                    dictValue: 'spotPledge'
                },
                {
                    dictName: '国内代采',
                    dictType: 'ORDER_BUSINESS_TYPE',
                    dictTypeName: null,
                    dictValue: 'internalAgentPurchase'
                },
                {
                    dictName: '海外采购',
                    dictType: 'ORDER_BUSINESS_TYPE',
                    dictTypeName: null,
                    dictValue: 'abroadPurchase'
                }
            ],
            businessTypeModalShow: false,
            customerCompanyList: [],
            loading: false,
            searchForm: {},
            tableData: {
                pageNum: 1,
                pageSize: 10,
                filterList: [],
                sortList: [],
                list: []
            },
            s_height: $(window).height() - 220,
            screenWidth: null,
            timer: null,
            dictInfo: {
                customerId: []
            },
            statusList: [
                {
                    text: '草稿',
                    value: '0'
                },
                // {
                //     text: '审批中',
                //     value: '1'
                // },
                {
                    text: '已提交',
                    value: '8'
                },
                {
                    text: '已接收',
                    value: '9'
                },
                {
                    text: '被拒收',
                    value: '10'
                },
                {
                    text: '执行中',
                    value: '3'
                },
                {
                    text: '已完结',
                    value: '7'
                }
            ]
        };
    },
    methods: {

        confirmSelectBusinessType(){
            if (!this.selectCompanyId) {
                this.$Message.error('运营企业必填');
                return;
            }
            this.$router.push({
                path: '/platformApp/order-add',
                query: {
                    label: '新建订单',
                    businessType:this.SelectBusinessType,
                    companyId:this.selectCompanyId,
                    key: "new",
                    disabled: true,
                    showBtn: true,
                    ViewandEdit:true,
                    saveshow:true
                }
            });
        },
        async selectWorkOrderOrder(orderNums) {
            let body = {
                pageNum: this.tableData.pageNum,
                pageSize: this.tableData.pageSize,
                filterList: this.tableData.filterList,
                sortList: this.tableData.sortList,
                applets: 0
            }

            if (orderNums && orderNums.length > 0) {
                body.orderNums = orderNums;
            }
            if (this.searchForm.orderStatus && this.searchForm.orderStatus.length > 0) {
                body.orderStatusList = this.searchForm.orderStatus;
            }
            if (this.cancel) {
                this.cancel();
            }
            let aCancelToken = new axios.CancelToken((c) => {
                this.cancel = c;
            });
            let { data } = await api.selectWorkOrderOrder(body, aCancelToken);
            if (data.returnCode === 200) {
                this.tableData.list = data.returnData.pageInfo.list;
                this.tableData.list.forEach(x => {
                    x.orderNotReceivedWeightMaps = [];
                    if (x.contractWeightMaps) {
                        x.contractWeightMaps.forEach(item => {
                            x.orderNotReceivedWeight = ((x.contractWeight - x.toOrderContractWeightSum) > 0 ? ((x.contractWeight - x.toOrderContractWeightSum)).toFixed(3) : 0);

                            let toOrderContract = x.toOrderContractWeightMaps.filter(y => y.category === item.category);
                            x.orderNotReceivedWeightMaps.push({
                                category: item.category,
                                weight: toOrderContract && toOrderContract.length > 0 ? ((item.weight - toOrderContract[0].weight) > 0 ? (item.weight - toOrderContract[0].weight) : 0).toFixed(2) : item.weight
                            });
                        });
                    }
                });
            } else {
                this.$Message.error(data.returnMsg);
            }
            this.loading = false;
        },
        async initData(orderNums) {
            this.loading = true;
            switch (this.searchType) {
                case 'order':
                    await this.selectWorkOrderOrder(orderNums);
                    break;
            }
        },
        handleReachBottom() {
            return new Promise(async resolve => {
                this.tableData.pageSize += 10;
                await this.initData();
                resolve();
            });
        },
        getDictData() {
            baseCodeApi.selectMatName().then(({ data }) => {
                if (data.returnCode === 200) {
                    this.dictInfo.matTypNameList = data.returnData.map(i => {
                        return {
                            dictName: i.matName,
                            dictValue: i.matCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
            baseCodeApi.getAllUserCompany().then(({ data }) => {
                if (data.returnCode === 200) {
                    this.dictInfo.companyId = data.returnData.map(i => {
                        return {
                            dictName: i.companyName,
                            dictValue: i.id
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
            baseCodeApi.getOftenTypeByUserId().then(({ data }) => {
                if (data.returnCode === 200) {
                    this.dictInfo.matType = data.returnData.map(i => {
                        return {
                            dictName: i.companyMatName,
                            dictValue: i.companyMatCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg, 'error');
                }
            }).catch(err => {
                console.log(err);
            });
            baseCodeApi.getContractDictData().then(({ data }) => {
                if (data.returnCode === 200) {
                    const { platformWarehouseList, customerList } = data.returnData;
                    this.dictInfo.whCode = platformWarehouseList.map(i => {
                        return {
                            dictName: i.whName,
                            dictValue: i.id
                        };
                    });
                    this.dictInfo.customerId = customerList.map(i => {
                        return {
                            dictName: i.customerName,
                            dictValue: i.id,
                            customerCode: i.customerCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });

            // 字典
            baseCodeApi.getDictDataByDictTypeList([
                'CONTRACT_STATUS',
                'INVOICE_TYPE',
                'FLIE_TYPE',
                'BUSINESS_TYPE',
                'FEE',
                'BILL_TYPE',
                'ORDER_BUSINESS_TYPE',
                'AGENCY_FEE_TYPE',
                'REPAYMENT_TYPE',
                'RELEASE_TYPE',
                'CHARGE_DIMENSION',
                'DEDUCTION_METHOD',
                'CHARGING_METHOD',
                'PaymentMethod',
                'PAY_COLLECT_FLAG',
                'TRADE_TYPE',
                'TRANS_STATUS',
                'TRADE_MODE',
                'CHARGE_STATUS',
                'DAMAGED_SIGN',
                'CIRCULATION_STATUS',
                'PAYMENT_STATUS',
                'CIRCULATION_TYPE',
                'BILL_STATUS'
            ]).then(({ data }) => {
                if (data.returnCode === 200) {
                    const { returnData } = data;
                    // dataInfo.menuList = data.returnData.filter(item => item.dictType === 'CONTRACT_STATUS');
                    this.dictInfo.dictArr = returnData;
                    this.dictInfo.contractStatus = returnData.filter(item => item.dictType === 'CONTRACT_STATUS');
                    this.dictInfo.businessType = returnData.filter(item => item.dictType === 'ORDER_BUSINESS_TYPE');
                    this.dictInfo.agencyFeesCalType = returnData.filter(item => item.dictType === 'AGENCY_FEE_TYPE');
                    this.dictInfo.repaymentType = returnData.filter(item => item.dictType === 'REPAYMENT_TYPE');
                    this.dictInfo.tradeMode = returnData.filter(item => item.dictType === 'TRADE_MODE');
                    this.dictInfo.releaseType = returnData.filter(item => item.dictType === 'RELEASE_TYPE');
                    this.dictInfo.measureUnit = returnData.filter(item => item.dictType === 'CHARGE_DIMENSION');
                    this.dictInfo.invotp = returnData.filter(item => item.dictType === 'INVOICE_TYPE');
                    this.dictInfo.fileType = returnData.filter(item => item.dictType === 'FLIE_TYPE');
                    this.dictInfo.earnestMoneyDeductionMethod = returnData.filter(item => item.dictType === 'DEDUCTION_METHOD');
                    this.dictInfo.agencyChargingMethod = returnData.filter(item => item.dictType === 'CHARGING_METHOD');
                    this.dictInfo.PaymentMethod = returnData.filter(item => item.dictType === 'PaymentMethod');
                    this.dictInfo.currency = returnData.filter(item => item.dictType === 'FEE');
                    this.dictInfo.sfbz = returnData.filter(item => item.dictType === 'PAY_COLLECT_FLAG');
                    this.dictInfo.bustype = returnData.filter(item => item.dictType === 'BUSINESS_TYPE');
                    this.dictInfo.formsOfCommerce = returnData.filter(item => item.dictType === 'TRADE_TYPE');
                    this.dictInfo.transStatus = returnData.filter(item => item.dictType === 'TRANS_STATUS');
                    this.dictInfo.billType = returnData.filter(item => item.dictType === 'BILL_TYPE');
                    this.dictInfo.chargeStatus = returnData.filter(item => item.dictType === 'CHARGE_STATUS');
                    this.dictInfo.damagedSign = returnData.filter(item => item.dictType === 'DAMAGED_SIGN');
                    this.dictInfo.circulationType = returnData.filter(item => item.dictType === 'CIRCULATION_STATUS');
                    this.dictInfo.paymentStatus = returnData.filter(item => item.dictType === 'PAYMENT_STATUS');
                    this.dictInfo.tranType = returnData.filter(item => item.dictType === 'CIRCULATION_TYPE');
                    this.dictInfo.billStatus = returnData.filter(item => item.dictType === 'BILL_STATUS');
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        search() {
            this.loading = true;
            this.tableData.filterList = [];
            if (this.searchForm.purchasingAgreementCode) {
                this.tableData.filterList.push({
                    filterKey: 'purchasingAgreementCode',
                    filterValue: this.searchForm.purchasingAgreementCode
                });
            }
            if (this.searchForm.entrustedEnterprise) {
                this.tableData.filterList.push({
                    filterKey: 'entrustedEnterprise',
                    filterValue: this.searchForm.entrustedEnterprise
                });
            }
            if (this.searchForm.contractValidityPeriod) {
                this.tableData.filterList.push({
                    filterKey: 'contractValidityPeriodStart',
                    filterValue: this.searchForm.contractValidityPeriod[0] ? this.$utils.dateToDateStr(this.searchForm.contractValidityPeriod[0]) : null
                });
                this.tableData.filterList.push({
                    filterKey: 'contractValidityPeriodEnd',
                    filterValue: this.searchForm.contractValidityPeriod[1] ? this.$utils.dateToDateStr(this.searchForm.contractValidityPeriod[1]) : null
                });
            }
            // 先清空
            this.tableData.sortList = [];
            if (this.sortField === 'orderCreatedDate') {
                this.tableData.sortList.push({
                    sortKey: 'created_date',
                    sortValue: this.switchSortPng === 'up' ? 'asc' : 'desc'
                });
            }
            if (this.sortField === 'contractValidityPeriodStart') {
                this.tableData.sortList.push({
                    sortKey: 'contract_validity_period_start',
                    sortValue: this.switchSortPng === 'up' ? 'asc' : 'desc'
                });
            }
            if (this.sortField === 'contractExpirationDate') {
                this.tableData.sortList.push({
                    sortKey: 'contract_validity_period_end',
                    sortValue: this.switchSortPng === 'up' ? 'asc' : 'desc'
                });
            }
            this.initData();
        },
        add() {
            // 当前客户运营企业
            baseCodeApi.getCompanyByCustomerId(this.$utils.getUserInfo().entrustingParty).then(({ data }) => {
                if (data.returnCode === 200) {
                    this.customerCompanyList = data.returnData.map(i => {
                        return {
                            dictName: i.companyName,
                            dictValue: i.id
                        };
                    });
                    if (this.customerCompanyList && this.customerCompanyList.length > 0) {
                        this.selectCompanyId = this.customerCompanyList[0].dictValue;
                    }
                    this.businessTypeModalShow = true;
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        refresh() {

        },
        companyAllCheck() {
            this.companyAllChecked = !this.companyAllChecked;
            this.companyList.forEach(x => {
                x.checked = this.companyAllChecked;
            });
        },
        searchSortChange() {
            this.search();
        },
        switchSort(png) {
            if (png === 'up') {
                this.switchSortPng = 'down';
            } else {
                this.switchSortPng = 'up';
            }
            this.searchSortChange();
        },
        applicationForRelease() {
            let orderNumList = [...new Set(this.dataSelected.map(x => x.orderNum))];
            if (orderNumList.length === 0) {
                this.$Message.warning('请至少选择一条数据');
                return;
            }
            if (orderNumList && orderNumList.length > 1) {
                this.$Message.warning('只能选择同一个订单下的数据');
                return;
            }
            console.log(this.dataSelected);
            if (this.dataSelected && this.dataSelected.find(x => x.cargoReleaseStatus != 3)) {
                this.$Message.warning('只有在库状态才可进行解押申请');
                return;
            }
            this.$router.push({
                path: '/platformApp/MultipleTransOrder',
                query: {
                    orderNumStr: orderNumList.join(','),
                    idStr: this.dataSelected.reduce((arr, x) => arr.concat((x.id + '').split(',')), []).join(',')
                }
            });
        },
        allCheckChange(val) {
            this.tableData.list.forEach(x => {
                x.checked = val;
            });
        },
        selectWorkOrderGoodsGroupByCompanyId() {
            api.selectWorkOrderGoodsGroupByCompanyId({}).then(({ data }) => {
                if (data.returnCode === 200) {
                    data.returnData.forEach(x => {
                        x.checked = true;
                    });
                    this.companyList = data.returnData.filter(x => x.companyId > 0);
                } else {
                    this.$Message.error(data.returnMsg);
                }
            });
        },
        selectWorkOrderGoodsGroupByMatType(companyIds) {
            let body = {};
            if (companyIds && companyIds.length > 0) {
                body.companyIds = companyIds;
            }
            api.selectWorkOrderGoodsGroupByMatType(body).then(({ data }) => {
                if (data.returnCode === 200) {
                    data.returnData.forEach(x => {
                        x.checked = false;
                    });
                    this.matList = data.returnData;
                } else {
                    this.$Message.error(data.returnMsg);
                }
            });
        },
        scrollChange(type) {
            let times = 0;
            let timer = setInterval(() => {
                if (type === 'left') {
                    document.getElementById('mat-container').scrollLeft -= 40;
                } else {
                    document.getElementById('mat-container').scrollLeft += 40;
                }
                times += 1;
                if (times >= 10) {
                    clearInterval(timer);
                }
            }, 20);
        },
        companyClick(item) {
            item.checked = !item.checked;
        },
        menuSelect(name) {
            this.menuActiveName = name;
        },
        matClick(item) {
            item.checked = !item.checked;
        },
        orderSearchReset() {
            this.searchForm = {};
            this.tableData.filterList = [];
            this.initData();
        },
        reset() {
            this.seniorSearchForm = {
                matType: null,
                validatePeriod: null,
                warehouse: null,
                goodsBondedProperty: null,
                dateGenSt: null,
                dataGenEd: null,
                expireDateSt: null,
                expireDateEd: null,
                inPlanTimeSt: null,
                inPlanTimeEd: null,
                contractValidityPeriodStartSt: null,
                contractValidityPeriodStartEd: null,
                contractValidityPeriodEndSt: null,
                contractValidityPeriodEndEd: null
            }
            this.initData();
        },
        dropHandle(data) {
            this.searchType = 'order';
            this.initData([data.orderNum]);
        },
        advancedQuery() {
            this.searchMenu = true;
            this.searchShow = false;
        }
    },
    mounted() {
        this.loading = true;
        console.log(this.$route.params.orderNums);
        if (this.$route.query.date) {
            this.searchForm.contractValidityPeriod = JSON.parse(this.$route.query.date).map(x => new Date(x));
            this.search();
        } else {
            this.initData(this.$route.params.orderNums);
        }
        this.getDictData();
        this.selectWorkOrderGoodsGroupByCompanyId();
        this.selectWorkOrderGoodsGroupByMatType();
        const that = this

        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                that.screenWidth = window.screenWidth
            })()
        }

    },
    watch:{
        'tableData.list': {
            handler(val) {
                if (this.searchType === 'mat') {
                    this.dataSelected = val.filter(x => x.checked);
                    this.allCheck = this.dataSelected.length === this.tableData.list.length && this.dataSelected.length !== 0;
                }
                if (this.searchType === 'container') {
                    this.containerDataSelected = val.filter(x => x.checked);
                    this.dataSelected = val.reduce((arr, item) => arr.concat(item.goodsList), []).filter(x => x.checked);
                    this.allCheck = this.containerDataSelected.length === this.tableData.list.length && this.containerDataSelected.length !== 0;
                }
            },
            deep: true
        },
        screenWidth(val){
            if(!this.timer){
                this.timer = true
                let that = this
                setTimeout(function(){
                    that.s_height = $(window).height() - 180;
                    that.timer = false
                },400)
            }
        },
        menuActiveName: {
            handler() {
                this.initData();
            }
        }
    }
};
</script>

<style lang="less">
.order-query {
    .ivu-tooltip-inner {
        background-color: rgba(70, 76, 91, 0.6)!important;
        font-weight: normal!important;
    }
    .ivu-tooltip-arrow {
        border-bottom-color: rgba(70, 76, 91, 0.6)!important;
    }
}
</style>
<style scoped lang="less">
.operation {
    padding: 0 20px 0;
    background-color: #f4f7fa;
}
.nav-tab {
    background-color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30px;
}
.search-area {
    width: 100%;
    padding: 10px 15px;
    .search-btn {
        background-color: #4f68e8;
        color: #fff;
        width: 30%;
        max-width: 120px;
        margin-right: 5px;
    }
    .add-btn {
        background-color: #3e4c64;
        color: #fff;
        margin-left: 5%;
        width: 30%;
        max-width: 120px;
    }
}

.content {
    background-color: #f4f7fa;
    padding: 0 20px 10px 20px;
}
.border-test {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    border-radius: 50%;
    transform: rotate(45deg);
}


.font-bold {
    font-weight: 700;
}

.search-container {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid rgba(217, 217, 217, 1);

    .warehouse, .stock {
        padding: 0 50px;

        .title {
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }
    }

    .warehouse {
        padding-top: 30px;
    }

    .stock {
        padding-bottom: 30px;
    }

    .warehouse-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 276px;
        height: 132px;
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
        padding: 10px 20px;
        color: rgba(0, 0, 0, 0.85);
        margin-right: 10px;
        transition: all .5s;

        &:hover {
            .warehouse-item__checked {
                border: 1px solid rgba(79, 104, 232, 1);
                background-color: rgba(79, 104, 232, 0.1);
            }

            .warehouse-item__not-checked {
                border: 1px solid rgba(217, 217, 217, 1);
                background-color: rgba(255, 255, 255, 1);
            }
        }
    }

    .warehouse-item__checked {
        border: 1px solid rgba(79, 104, 232, 1);
        background-color: rgba(79, 104, 232, 0.1);
    }

    .warehouse-item__not-checked {
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
    }

    .bottom-btn, .bottom-btn2 {
        cursor: pointer;
        width: 50px;
        height: 0;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -20px;
        border-top: 20px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        text-align: center;
        z-index: 100;
        transition: all .3s;
        font-size: 20px !important;

        &:hover {
            transform: scale(1.2) translateY(1px);
        }

        &:hover + .bottom-btn2 {
            transform: scale(1.2) translateY(2px);
        }

        .ios-menu {
            position: absolute;
            top: -20px;
            right: 4px;
            transition: all .3s;
        }
    }

    .bottom-btn2 {
        width: 52px;
        bottom: -21px;
        border-top: 21px solid rgba(217, 217, 217, 1);
        z-index: 90;
    }
}
</style>
